<template>
  <micro-app
    :key="url" 
    class="grow-1"
    :name="name" 
    :url="url" 
    :baseroute="baseroute" 
    :iframe="iframe" 
    :keep-alive="keepAlive" 
    :fiber="fiber"
    v-bind="binds"
    @datachange="datachange">
  </micro-app>
</template>

<script lang="ts">
import { defineComponent, computed, type PropType, getCurrentInstance } from 'vue';
import { eventBusOnMessageHandler, type MicroAppEvent } from '@src/use.lib/microAppEventBusCenter';

export declare namespace VmoProtalVessel{
  export type Props = {
    name:string,
    url:string,
    defaultPage:string,
    baseroute:string,
    iframe:boolean,
    keepAlive:boolean,
    fiber:boolean,
    binds:Partial<Binds>
  }
  export type Binds={
    inline:boolean,
    destroy:boolean,
    clearData:boolean,
    disableScopecss:boolean,
    disableSandbox:boolean,
    ssr:boolean,
    disableMemoryRouter:boolean,
    keepRouterState:boolean,
    disablePatchRequest:boolean,
    shadowDOM:boolean,
  }
}

export default defineComponent({
  name:'vmo-portal-vessel',
  props:{
    name:{
      type:String as PropType<string>,
      required:true,
    },
    url:{
      type:String as PropType<string>,
      required:true,
    },
    baseroute:{
      type:String as PropType<string>,
      default:''
    },
    iframe:{
      type:Boolean as PropType<boolean>,
      default:true,
    },
    keepAlive:{
      type:Boolean as PropType<boolean>,
      default:true,
    },
    fiber:{
      type:Boolean as PropType<boolean>,
      default:true,
    },
    binds:{
      type:Object as PropType<Partial<VmoProtalVessel.Binds>>,
      default:()=>({})
    }
  },
  setup(props){
    const { proxy } = getCurrentInstance() as { proxy:any };
    function datachange($event:CustomEvent){
      eventBusOnMessageHandler($event.detail.data,proxy);
    }
    return {
      proxy,
      datachange
    }
  }
})
</script>
